<template>
  <body  class="prole">
    <i class="el-icon-back back_btn" @click="back()" ></i>
     <div class="box">
      <el-row type="flex" class="row-btn" justify="space-around">
        <el-col :span="6"><el-button class="btn" @click="toIntro('前台')" >前 台</el-button></el-col>
        <el-col :span="6"><el-button class="btn" @click="toIntro('医助')">医 助</el-button></el-col>
        <el-col :span="6"><el-button class="btn" @click="toIntro('兽医师')">兽 医 师</el-button></el-col>
      </el-row>
     </div>
  </body>
</template>
<script>
   export default{
    name:'role',
    data(){
      return {

      }
    },
    methods:{
      toIntro(roleName) {
      this.$router.push({ path: '/roleIntro', query:{role:roleName} })
    },
    back(){
      this.$router.push({ path: '/study' })
    }


    }
   }
</script>
<style scoped>
 .prole{
    background-image: url("../assets/三只狗.png");
    background-size: 100% 100%;
 }
 .box {
  text-align: center;
  font-family: 宋体;
  padding: 400px 10px;
}
.back_btn{
  float: left;
  font-size: 35px;
}
 .btn {
  border-radius: 25px;
  color: white;
  background-color: deepskyblue;
}
</style>